<template>
  <div class='container'>
    <el-dialog
      title="预览文章"
      :visible="previewDialogVisible"
      @close="closeDialog"
      @open="openDialog"
    >
      <h2>{{reviewData.title}}</h2>
      <p>{{ formatDate(reviewData.createTime) }} <span style="padding:0 5px">{{reviewData.username}}</span><i style="padding:0 5px" class="el-icon-view"></i>{{reviewData.visits}}</p>
      <div class="ql-container">
        <p v-html="reviewData.articleBody"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'ArticlesPreview',
  props: {
    reviewData: {
      required: true
    },
    previewDialogVisible: {
      default: false
    }
  },
  methods: {
    // 格式化日期
    formatDate (value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },
    closeDialog () {
      this.$emit('closePreviewDialog')
    },
    openDialog () {}
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-dialog{
    width:60%
  }
.ql-container{
  background:#eee;
  border:0;
  border-top:1px dashed
}
</style>
